<template>
    <div class="sub-box-border body" v-loading="loading">
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/managermanagement/homeworkcollection">作业集</el-breadcrumb-item>
          <el-breadcrumb-item to="/managermanagement/collectioninformation">作业集提交情况</el-breadcrumb-item>
          <el-breadcrumb-item >作业信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-divider></el-divider>
      <div style="width: 400px;">
        <el-form label-position="right" label-width="80px">
          <el-form-item label="作业名称:">
            {{collection.collectionName}}
          </el-form-item>
          <el-form-item label="作业介绍:">
            <el-input type="textarea" disabled v-model="collection.collectionIntroduction"></el-input>
          </el-form-item>
          <el-form-item label="作业要求:">
            <el-input type="textarea" disabled v-model="collection.collectionRequest"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="sub-margin">
        <a :href="downloadAddress" :download="homework.homeworkFileAddress">
          <el-button type="success">
            下载文件
          </el-button>
        </a>
      </div>
      <div class="sub-margin">
        提交内容
      </div>
      <div class="sub-margin box-standard content-box">
        <div class="content box-shadow" v-html="homework.homeworkContent">
        </div>
      </div>
      <div class="sub-margin evaluate-box">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="状态">
            <el-select v-model="homework.homeworkState" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评价" required>
            <el-input v-model="homework.homeworkEvaluate"></el-input>
          </el-form-item>
            <el-form-item label="评分" required>
              <el-input v-model="homework.homeworkGrade"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="evaluate()">提交</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
    export default {
        name: "HomeworkInformation",
        data(){
          return {
              loading: false,
              collection:{
                collectionName: 'embedded',  //题目集名称
                collectionIntroduction: '测试用',  //题目集的介绍
                collectionRequest: '按时完成',
                collectionCreateTime: '2016-05-02'  //创建时间
              },
              homework:{
                homeworkId: 1,
                homeworkName: '关晨亮',  //提交的用户姓名
                homeworkSubmitTime: '2016-05-02',  //提交时间
                homeworkState: 0,
                homeworkEvaluate: '提交成功',  //当前评价
                homeworkContent: '<p>这是一段html内容<p>',
                homeworkGrade: '',  //评分
              },
              options: [{
                value: 0,
                label: '已提交',
                disabled: true
              }, {
                value: 1,
                label: '通过'
              }, {
                value: 2,
                label: '打回修改'
              }]
          }
        },
      computed:{
        downloadAddress:function(){
          let data = this.$data;
          return '/homework/filedownload?homeworkId='+data.homework.homeworkId
        }
      },
      methods:{
          getCollection:function(){
              let data = this.$data;
              let that = this;
              let qs = require("qs");
              this.axios.post("/collection/showcollection",qs.stringify({
                collectionId: data.collection.collectionId
              }))
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                data.collection = resData.data;
              }else{
                this.$message({
                  type: "error",
                  message: resData.errMsg
                })
              }
            })
          },
          getHomework:function () {
              let data = this.$data;
              let that = this;
              let qs = require("qs");
              this.axios.post("/homework/showhomework",qs.stringify({
                homeworkId: data.homework.homeworkId
              }))
            .then(response => {
              let resData = response.data;
              console.log(resData.data);
              if(resData.errCode == 200){
                data.homework = resData.data;
              }else{
                this.$message({
                  type: "error",
                  message: resData.errMsg
                })
              }
            })
          },
          evaluate:function(){
              let data = this.$data;
              let that = this;
              let qs =require("qs");
              data.loading = true;
              this.axios.post("/homework/evaluate",qs.stringify(data.homework))
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                this.$message({
                  type: "success",
                  message: resData.data
                })
              }else{
                this.$message({
                  type: "error",
                  message: resData.errMsg
                })
              }
              data.loading = false;
            })
          },
      },
      created:function(){
          let data = this.$data;
          data.homework.homeworkId = this.$route.params.homeworkId;
          data.collection.collectionId = this.$route.params.collectionId;
          this.getCollection();
          this.getHomework();
      }
    }
</script>

<style scoped>
  .body{
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  .el-divider--horizontal{
    margin: 12px 0px;
  }

  content-box{
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .content{
    width: 100%;
    height: 500px;
    overflow: auto;  /*非默认选项*/
  }

  .evaluate-box{
    width: 500px;
  }
</style>
